<template>
	<view class="task-list">
		<!-- 按日期分组的任务列表 -->
		<template v-for="(dateGroup, dateKey) in groupedTasks" :key="dateKey">
			<!-- 日期标题 -->
			<view class="date-header">
				<text class="date-text">{{ dateKey }}</text>
			</view>

			<!-- 团队分组 -->
			<template v-for="(projectGroup, projectName) in dateGroup" :key="projectName">
				<!-- 团队名称 -->
				<view class="projectName-header">
					<text class="projectName-name">{{ projectName}}</text>
				</view>

				<!-- 任务列表 -->
				<view class="task-group">
					<template v-for="task in projectGroup" :key="task.task_id">
						<!-- 主任务 -->
						<view class="task-item" :class="{ 'has-son': task.sons && task.sons.length }">
							<view class="task-content">
								<view class="task-left">
									<!-- 展开/折叠图标 -->
									<uni-icons v-if="task.sons && task.sons.length"
										:type="task.expanded ? 'bottom' : 'right'" size="16"
										@click="toggleTask(task)" />
									<text class="task-title">{{ task.taskName }}</text>
								</view>

								<!-- 操作菜单 -->
								<view class="task-actions">
									<uni-icons type="more-filled" size="20" @click="showActionMenu(task)" />
								</view>
							</view>

							<!-- 子任务列表 -->
							<view v-if="task.expanded && task.sons" class="subtask-list">
								<view v-for="subtask in task.sons" :key="subtask.task_id" class="subtask-item">
									<view class="subtask-content">
										<text class="subtask-title">{{ subtask.taskName }}</text>
										<!-- 子任务操作菜单 -->
										<view class="subtask-actions">
											<uni-icons type="more-filled" size="18"
												@click="showActionMenu(subtask, task)" />
										</view>
									</view>
								</view>
							</view>
						</view>
					</template>
				</view>
			</template>
		</template>

		<!-- 使用 uni-popup 组件 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff" :safe-area="true">
			<view class="action-menu" v-if="currentTask">
				<uni-list :border="false">
					<!-- 标题 -->
					<uni-list-item class="menu-title" :title="menuTitle" :border="false" :clickable="false" />
					<!-- 分隔线 -->
					<view class="menu-divider"></view>
					<!-- 操作选项 -->
					<uni-list-item class="menu-item" title="确认完成" v-if="status==='进行中'" :border="false" clickable
						@click="handleAction('确认完成')" />
					<uni-list-item class="menu-item" title="更改为进行中" v-if="status==='已完成'" :border="false" clickable
						@click="handleAction('更改为进行中')" />
					<uni-list-item class="menu-item delete" title="删除" :border="false" clickable
						@click="handleAction('删除')" />
				</uni-list>
			</view>
		</uni-popup>
		<ConfirmDialogVue :visible="confirmVisible" @cancel="confirmVisible = false" ref="confirmDialog"
			:message="message" @confirm="ConfirmDialog()" />
	</view>
</template>

<script>
	import api from '../api/api.js'
	import ConfirmDialogVue from './ConfirmDialog.vue'
	export default {
		components: {
			ConfirmDialogVue
		},
		props: {
			status: {
				type: String,
				default: '进行中'
			}
		},
		data() {
			return {
				confirmVisible: false,
				currentTask: null,
				parentTask: null,
				tasks: [{
						taskId: 1,
						taskName: '任务1',
						projectName: '团队A',
						dueDate: '2024-03-20',
						expanded: false,
						son: [{
								taskId: 11,
								taskName: '子任务1.1'
							},
							{
								taskId: 12,
								taskName: '子任务1.2'
							}
						]
					},
					{
						taskId: 2,
						taskName: '任务2',
						projectName: '团队B',
						dueDate: '2024-03-20',
						son: []
					}
				],
				message: null
			}
		},
		mounted() {
			this.getTasks()
		},
		watch: {
			status(newStatus, oldStatus) {
				console.log('click')
				this.getTasks()
			}
		},
		computed: {
			groupedTasks() {
				// 先创建分组对象
				const dateGroups = {};

				// 按原逻辑分组
				this.tasks.forEach(task => {
					if (!dateGroups[task.dueDate]) {
						dateGroups[task.dueDate] = {};
					}
					if (!dateGroups[task.dueDate][task.projectName]) {
						dateGroups[task.dueDate][task.projectName] = [];
					}
					dateGroups[task.dueDate][task.projectName].push(task);
				});

				// 创建有序对象
				const sortedGroups = {};

				// 获取所有日期并排序
				const sortedDates = Object.keys(dateGroups).sort((a, b) => {
					return new Date(b) - new Date(a);
				});

				// 按排序后的日期重建对象
				sortedDates.forEach(date => {
					sortedGroups[date] = dateGroups[date];
				});

				return sortedGroups;
			},
			menuTitle() {
				if (!this.currentTask) return '';
				if (this.parentTask) {
					return `${this.parentTask.taskName} - ${this.currentTask.taskName}`;
				}
				return this.currentTask.taskName;
			}
		},
		methods: {
			getTasks() {
				api.taskSearchAllWithUser({
					status: this.status
				}).then(re => {
					this.tasks = re.data.data
				})
			},
			toggleTask(task) {
				task.expanded = !task.expanded
			},
			showActionMenu(task, parentTask = null) {
				if (!task) return;
				this.currentTask = task;
				this.parentTask = parentTask;
				this.$refs.popup.open();
			},
			handleAction(action) {
				if (!this.currentTask) return;

				const eventData = {
					task: this.currentTask,
					parentTask: this.parentTask
				};
				this.$refs.popup.close()
				switch (action) {
					case '确认完成':
						this.openDialog(action);
						break;
					case '删除':
						this.openDialog(action);
						break;
					case '更改为进行中':
						this.openDialog(action);
						break;
				}
				this.$emit('change')
			},
			openDialog(operation) {
				// 配置不同操作的消息和处理逻辑
				const config = {
					'删除': {
						message: '是否确认删除该任务？',
						actionId: '113'
					},
					'确认完成': {
						message: '是否确认该任务已完成？',
						actionId: '111'
					},
					'更改为进行中': {
						message: '是否确认将该任务更改为进行中？',
						actionId: '110'
					}
				};
				// 获取当前操作的配置
				const operationConfig = config[operation];
				if (!operationConfig) {
					console.warn('未知的操作类型:', operation);
					return;
				}
				this.message = operationConfig.message
				this.confirmVisible = true
			},
			ConfirmDialog() {
				switch (this.message) {
					case '是否确认删除该任务？':
						this.confirmAction('113');
						break;
					case '是否确认该任务已完成？':
						this.confirmAction('111');
						break;
					case '是否确认将该任务更改为进行中？':
						this.confirmAction('110');
						break;
				}
			},
			confirmAction(Tostatus) {
				api.changeTaskStatus({
					taskId: this.currentTask.taskId,
					newStatus: Tostatus
				}).then(res => {
					this.getTasks();
					this.currentTask = null;
					this.parentTask = null;
					this.$emit('confirmChange')
				});
				this.confirmVisible = false; // 关闭确认窗口

			}
		}
	}
</script>

<style lang="scss">
	.task-list {
		padding: 15px;
		background-color: #f8f9fa;
		min-height: 100vh;

		.date-header {
			padding: 15px 0 10px;
			margin-bottom: 12px;
			position: sticky;
			top: 0;
			background-color: #f8f9fa;
			z-index: 1;

			.date-text {
				font-size: 18px;
				font-weight: 600;
				color: #2c3e50;
			}
		}

		.projectName-header {
			padding: 10px 0;
			margin-bottom: 10px;

			.projectName-name {
				font-size: 15px;
				color: #5c6c7c;
				font-weight: 500;
			}
		}

		.task-item {
			background-color: #fff;
			border-radius: 12px;
			margin-bottom: 12px;
			padding: 16px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

			&.has-son {
				border-left: 4px solid #007AFF;
				padding-left: 14px;
			}

			.task-content {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.task-left {
					display: flex;
					align-items: center;
					gap: 10px;
					flex: 1;
					margin-right: 8px;

					.task-title {
						font-size: 15px;
						color: #2c3e50;
						font-weight: 500;
					}
				}

				.task-actions {
					flex-shrink: 0;
				}
			}
		}

		.subtask-list {
			margin-top: 12px;
			margin-left: 26px;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: -16px;
				top: 0;
				bottom: 12px;
				width: 1px;
				background: #e0e6ed;
			}

			.subtask-item {
				padding: 10px 0;
				position: relative;

				&::before {
					content: '';
					position: absolute;
					left: -16px;
					top: 50%;
					width: 8px;
					height: 1px;
					background: #e0e6ed;
				}

				.subtask-content {
					background-color: #f8f9fa;
					border-radius: 8px;
					padding: 10px 12px;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.subtask-title {
						font-size: 14px;
						color: #3c4858;
						flex: 1;
						margin-right: 8px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.subtask-actions {
						flex-shrink: 0;
					}
				}
			}
		}
	}

	/* 操作菜单样式 */
	.action-menu {
		background-color: #fff;

		.menu-title {
			:deep(.uni-list-item__content-title) {
				text-align: center;
				color: #8795a1;
				font-size: 15px;
				font-weight: 700;
			}
		}

		.menu-item {
			:deep(.uni-list-item__content-title) {
				text-align: center;
				font-size: 16px;
			}

			&.delete {
				:deep(.uni-list-item__content-title) {
					color: #e53e3e;
				}
			}

			&.cancel {
				:deep(.uni-list-item__content-title) {
					font-weight: 500;
				}
			}
		}

		.menu-divider {
			height: 1px;
			background-color: #eee;
			transform: scaleY(0.5);
		}

		.menu-gap {
			height: 8px;
			background-color: #f5f5f5;
		}
	}

	:deep(.uni-list-item .uni-list-item__content-title) {
		text-align: center;
	}
</style>